<template>
  <div class="m-cascader-picker">
    <div class="m-cascader-picker-opacity" @click="handleCancel"></div>
    <div class="m-cascader-picker-inner">
      <ol class="m-cascader-picker-select">
        <li
          v-for="(item,index) in myValueObject"
          :key="index"
          :class="{'is-active': isActive(item.value)}"
          @click="handleSwitch(index, item.value)">
            {{item.label}}
        </li>
      </ol>
      <m-divider style="margin-top:-1px"/>
      <div class="m-cascader-picker-panel">
        <ul v-for="(item, index) in myOptions" :key="index" :style="styles(index)">
          <li
            v-for="(_item, _index) in item"
            :key="_index"
            :class="{'is-active': _item.value == myValue[index]}"
            @click="handleClick(index,_item.value)">
            {{_item.label}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    label: {
      type: Array
    },
    options: {
      type: Array
    }
  },
  data () {
    let label = []
    let myOptions = []
    myOptions.push(this.options.map(item => {
      return {
        value: item.value,
        label: item.label,
        children: item.children
      }
    }))
    let myValue = [...this.value]
    let currentIndex = myValue.length
    if (myValue.length > 0) {
      let array = this.options
      myValue.forEach((item) => {
        array.forEach(a => {
          if (a.value === item) {
            label.push(a.label)
            if (a.children && a.children.length > 0) {
              myOptions.push(a.children)
              array = a.children
            } else {
              currentIndex = myValue.length - 1
            }
          }
        })
      })
    }
    let currentValue = myValue[currentIndex] || '__placeholder'
    if (this.label !== undefined) {
      this.$emit('update:label', label)
    }
    return {
      myValue,
      myOptions,
      currentIndex,
      currentValue
    }
  },
  computed: {
    myValueObject () {
      let result = this.myValue.map((item, index) => {
        return this.myOptions[index].filter(option => {
          return option.value === item
        })[0]
      })
      if (this.myValue.length < this.myOptions.length) {
        result.push({
          label: '请选择',
          value: '__placeholder'
        })
      }
      return result
    }
  },
  methods: {
    styles (index) {
      let x = '0'
      if (index < this.currentIndex) {
        x = '-100%'
      } else if (index > this.currentIndex) {
        x = '100%'
      }
      return {
        transform: `translateX(${x})`,
        '-webkit-transform': `translateX(${x})`
      }
    },
    isActive (value) {
      return this.currentValue === value
    },
    getChildren (index, value) {
      let result = null
      let $item = this.myOptions[index].filter(item => item.value === value)[0]
      if ($item && $item.children) {
        result = $item.children.map(item => {
          return {
            value: item.value,
            label: item.label,
            children: item.children
          }
        })
      }
      return result
    },
    handleClick (index, value) {
      let children = this.getChildren(index, value)
      let myValue = [...this.myValue]
      let myOptions = [...this.myOptions]
      let currentValue = value
      if (children) {
        currentValue = '__placeholder'
        if (myOptions[index + 1]) {
          myOptions[index + 1] = children
          myOptions = myOptions.slice(0, index + 2)
        } else {
          myOptions.push(children)
        }
        setTimeout(() => {
          this.currentIndex = index + 1
        }, 32)
      }
      if (myValue[index]) {
        myValue[index] = value
        myValue = myValue.slice(0, index + 1)
      } else {
        myValue.push(value)
      }
      if (!children) {
        if (JSON.stringify(myValue) !== JSON.stringify(this.value)) {
          this.$emit('input', myValue).$emit('change', myValue)
          if (this.label !== undefined) {
            let label = myValue.map((item, index) => {
              return myOptions[index].filter(_item => _item.value === item)[0].label
            })
            this.$emit('update:label', label)
          }
        }
        this.$emit('close')
      }
      this.myOptions = myOptions
      this.myValue = myValue
      this.currentValue = currentValue
    },
    handleSwitch (index, value) {
      this.currentIndex = index
      this.currentValue = value
    },
    handleCancel () {
      this.$emit('close')
    }
  }
}

</script>

<style lang="scss">
  .m-cascader-picker{
    position:fixed;
    z-index:1000;
    width:100%;
    height:100%;
    top:0;
    left:0;
    &-opacity{
      background:$color-overlay;
      width:100%;
      position:absolute;
      height:100%;
    }
    &-inner{
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      background: #fff;
    }
    &-select{
      text-align:left;
      padding-left:0.2rem;
      overflow-x: auto;
      overflow-y: hidden;
      li{
        line-height:0.9rem;
        margin-right:10px;
        display:inline-block;
        position:relative;
        &.is-active{
          border-bottom-color:$color-primary;
          color:$color-primary;
          &:after{
            width:12px;
            position:absolute;
            margin-left:-6px;
            bottom:0;
            left:50%;
            border-bottom:2px solid $color-primary;
            content:'';
          }
        }
      }
      &:before{
        @inclide divider;
      }
    }
    &-panel{
      position:relative;
      height:6rem;
      overflow:hidden;
      ul{
        overflow:auto;
        text-align:left;
        position:absolute;
        height:100%;
        width:100%;
        transform: translateX(100%);
        transition: transform 0.2s ease 0s;
        background:#fff;
        li{
          line-height:0.9rem;
          height:0.9rem;
          padding:0 0.16rem;
          overflow:hidden;
          position:relative;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.is-active{
            color:$color-primary;
          }
          &:after{
            @include divider
          }
        }
      }
    }
  }
</style>
